<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>199000145 郑桂花</title>
		
		<style type="text/css">
			body{
				background-color: black;
			}
			
			img{
				position: absolute;
				left: 500px;
				top:200px;
			}
		</style>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				onkeydown=function(event){
					if(event.keyCode == "82"){
						$("#player").attr("src","img/player2.gif");
						var time = 3;
						}
					}
			$("#player").dblclick(function(event){
				$(this).attr("src","img/player2.gif");
				});
		                        
			$(document).click(function(event){
				//event=window.event||event;  ?
				event=window.event;
				arcX = event.clientX-80;//鼠标点击的位置的
				arcY = event.clientY-60;//鼠标点击的位置
								
				console.log(arcX);
				console.log(typeof arcX);
				//console.log($("#player").offsetLeft);
				console.log($("#player").css('left'));
				console.log(typeof $("#player").css('left'));
				console.log($("#player").css('top'));//199100214 张涛
				var X=parseInt($("#player").css('left'));
				var Y=parseInt($("#player").css('top'));//当前的照片的位置
				console.log(X);
				console.log(typeof X);
				if(X<arcX){
					$("#player").attr("src","img/player_right.gif");
				}else{
									
					$("#player").attr("src","img/player_left.gif");
				}
				let myset = setInterval(lf,"200");
				let myset2 = setInterval(rt,"200");
				
								
				function lf(){
					if(X<arcX){
										
						if((arcX-X)<10){
							X=X+(arcX-X);
							var XPX=X+"PX";
							clearInterval(myset);
							$("#player").stop().css({"left":XPX});
							if(X==arcX&&Y==arcY){
								$("#player").stop().attr("src","img/player_right.jpg");
							}
											
							}else{
								X=X+10;
								var XPX=X+"PX";
								console.log(XPX);
								$("#player").stop().css({"left":XPX});
								// await.sleep(1000);
							}
						}else{
							if((X-arcX)<10){
								X=X-(X-arcX);
								var XPX2=X+"PX";
								console.log(XPX2);
								$("#player").stop().css({"left":XPX2});//.attr("src","imgayer_left.jpg");
								clearInterval(myset);
								if(X==arcX&&Y==arcY){
									$("#player").stop().attr("src","img/player_left.jpg");
								}
							}else{
								X=X-10;
								var XPX2=X+"PX";
								console.log(XPX2);
								$("#player").stop().css({"left":XPX2});
							}
						}	
					} 
					function rt(){
						if(Y<arcY){
										
							if((arcY-Y)<10){
								Y=Y+(arcY-Y);
								var YPX=Y+"PX";
								clearInterval(myset2);
								$("#player").stop().css({"top":YPX});
								if(X==arcX&&Y==arcY){
									$("#player").stop().attr("src","img/player_right.jpg");
								}
											
						}else{
							Y=Y+10;
							var YPX=Y+"PX";
							console.log(YPX);
							$("#player").stop().css({"top":YPX});
							// await.sleep(1000);
						}
					}else{
						if((Y-arcY)<10){
							Y=Y-(Y-arcY);
							var YPX2=Y+"PX";
							console.log(YPX2);
							$("#player").css({"top":YPX2});
							clearInterval(myset2);
							if(X==arcX&&Y==arcY){
								$("#player").stop().attr("src","img/player_left.jpg");
							}
						}else{
							Y=Y-10;
							var YPX2=Y+"PX";
							console.log(YPX2);
							$("#player").stop().css({"top":YPX2});
						}
					}
				}
				})
			});
		</script>
			
	</head>
	<body>
		<img id="player" src="img/player_left.gif" >
	</body>
</html>
